<template>
  <el-container>
    <RoleSelect @roleSelectData='roleSelectData' @openDialog="openDialog" :sendPage='page' :selections='selections' @selectRoleList='selectRoleList' @refreshRoleList="parent"/>
    <RoleTable :sendSelectData='selectData' @handleSelections="handleSelections" ref="refresh" @page="getPage" :allRole='roleList' >
      <el-table-column label="操作" align="center" fixed="right" width="250" 
      v-if="$store.state.updateRoleFlag||$store.state.deleteRoleFlag||$store.state.setUserRoleQXFlag"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" 
          v-if="$store.state.updateRoleFlag"
          @click="updateRole(scope.row)">修改</el-button>
          <el-button type="danger " size="mini" 
           v-if="$store.state.deleteRoleFlag"
          @click="deleteRole(scope.row.roleId)">删除</el-button>
          <el-button type="text" size="mini"
           v-if="$store.state.setUserRoleQXFlag"
           @click='setRoleQX(scope.row)'>设置角色权限</el-button>
        </template>
      </el-table-column>
    </RoleTable>
    <RoleInsert v-if="flag" @closeDialog="closeDialog" @refreshRoleList="parent" />
    <RoleUpdate v-if="updateFlag" :rowRole='rowRole' @closeDialog='closeDialog' @refreshRoleList="parent"/>
    <SetRoleQX v-if="roleFlag" :role='role' @closeDialog='closeDialog'/>
  </el-container>
</template>
<script>
import RoleSelect from "./role/RoleSelect";
import RoleTable from "./role/RoleTable";
import RoleInsert from "./role/RoleInsert";
import RoleUpdate from './role/RoleUpdate'
import SetRoleQX from './role/SetRoleQX'
import { Message } from "element-ui";
export default {
  components: {
    RoleTable,
    RoleSelect,
    RoleInsert,
    RoleUpdate,
    SetRoleQX
  },
  data() {
    return {
      selections: [],
      flag: false,
      page: {},
      roleList:[],
      role:{},
      roleFlag:false,
      selectData:null,
      rowRole:{},
      updateFlag:false
    };
  },
  methods: {
    getPage(val) {
      this.page = val;
    },
    deleteRole(val) {
      console.log(val);
      const vm = this;
      vm.$http("/role/deleteRoleById", { params: { roleId: val } }).then(
        res => {
          if(res.data==-1){
            Message({ message: "删除失败,此角色已关联用户", type: "error" })
          }else if(res.data==1){
            Message({ message: "删除成功", type: "success" });
          //   // vm.$emit("refreshRoleList");
            vm.$refs.refresh.roleList();
          }else {
            Message({ message: "删除失败", type: "error" });
          }
        }
      );
    },
    updateRole(val) {
      // console.log(val)
      this.rowRole=val;
      this.updateFlag=true
    },
    handleSelections(val) {
      this.selections = val;
    },
    openDialog(val) {
      this.flag = val;
    },
    closeDialog(val) {
      this.flag = val;
      this.roleFlag=val;
      this.updateFlag=val
    },
    parent() {
      this.$refs.refresh.roleList();
    },
    selectRoleList(val){
        // console.log(val)
        this.roleList=val;
    },
    roleSelectData(val){
      // console.log(val)
      this.selectData=val
    },
    setRoleQX(val){
      this.role=val
      this.roleFlag=true
    }
  }
};
</script>
<style lang='less' scoped>
.el-container {
  height: 575px;
  display: flex;
  flex-direction: column;
  width: 1166px;
  // justify-content: space-between;
}
</style>